<template>
	<view style="height: 100%;" class="flex flex-dir-c">
		<u-tabs-swiper barWidth="60" name="name" active-color="#000000" inactive-color="#666666" bg-color="none"
			ref="tabs1" :list="inits.tabs" :current="inits.current" @change="tabsChange" :is-scroll="false"
			swiperWidth="750"></u-tabs-swiper>
		<swiper :current="inits.swiperCurrent" @transition="transition" @animationfinish="animationfinish"
			class="swiper">
			<swiper-item class="swiper-item" v-for="(item, index) in inits.tabs" :key="index">
				<scroll-view scroll-y class="scroll" @scrolltolower="loadmore">
					<view class="list">
						<view class="flex flex-jc-sb">
							<view style="font-size: 28rpx; color: #666666;">用户昵称</view>
							<view style="font-size: 28rpx; color: #666666;">累计消费</view>
						</view>
						<view v-for="(item2,i) in inits.list" :key="item2.id" class="list-item">
							<view class="flex flex-jc-sb flex-ai-c">
								<view class="flex">
									<u-avatar style="margin-right: 16rpx;" :src="item2.headavatar" size="64"></u-avatar>
									<view class="flex flex-dir-c flex-jc-sa" style="height: 100%;">
										<view class="list-item-name">{{item2.nickname}}</view>
										<view class="list-item-time" style="margin-top: 4rpx;">注册时间：{{item2.create_time}}</view>
									</view>
								</view>
								<view>{{item2.total_money}}</view>
							</view>
						</view>
					</view>
					<u-loadmore bg-color="none" :status="inits.loadStatus" @loadmore="loadmore"></u-loadmore>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive, ref, watch
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import home from '@/api/home.js';
	let tabs1 = ref()
	const inits = reactive({
		swiperCurrent: 0,
		current: 0,
		tabs: [
			{
				name: '直推用户',
				v: 1
			},
			{
				name: '间推用户',
				v: 2
			}
		],
		page: 1,
		loadStatus: '',
		list: []
	})
	watch(() => inits.swiperCurrent, () => {
		reset()
	})
	const showMsg = (msg : string) => {
		uni.showToast({
			title: msg,
			icon: 'none'
		})
	}

	const loadmore = () => {
		if (inits.loadStatus == 'nomore') return
		getList()
	}
	const reset = () => {
		inits.list = []
		inits.page = 1
		getList()
	}
	const getList = async () => {
		const res = await home.getRecommendUserList({
			page: inits.page,
			size: 10,
			type: inits.tabs[inits.swiperCurrent].v
		})
		inits.list = [...inits.list, ...res.data]
		if (res.data.length < 10) return moreStatus('nomore')
		if (res.data.total <= 10) {
			moreStatus('nomore')
		} else {
			moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
		}
		if (res.data.length === 0) return false
		inits.page += 1 // 当前页加1
	}
	const moreStatus = (status : string) => {
		inits.loadStatus = status
	}
	// tabs通知swiper切换
	const tabsChange = (index : number) => {
		inits.page = 1
		inits.list = []
		inits.swiperCurrent = index;
	}
	// swiper-item左右移动，通知tabs的滑块跟随移动
	const transition = (e) => {
		let dx = e.detail.dx;
		tabs1.value.setDx(dx);
	}
	const animationfinish = (e) => {
		let current2 = Number(e.detail.current)
		tabs1.value.setFinishCurrent(current2);
		inits.swiperCurrent = current2;
		inits.current = current2;
	}

	onLoad((op) => {
		getList()
	})
</script>
<style>
	page {
		height: 100%;
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	:deep(.u-tabs-item) {
		color: #000 !important;
	}

	.list {
		margin-top: 45rpx;
		padding: 0 60rpx;
		margin-bottom: 20rpx;

		&-item {
			border-bottom: 1rpx solid #EEEFF0;
			padding: 22rpx 0;
			&-name{
				font-size: 28rpx;
			}
			&-time{
				font-size: 16rpx;
				color: #666666;
			}
		}
	}
</style>